/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-17 10:46:42
 * @Description:
 */
import Card from '@/components/Card';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/plots';
import { Button, DatePicker } from 'antd';
import React from 'react';
import { useModel } from '@umijs/max';
import { Dispatch, memo, SetStateAction, useEffect, useState } from 'react';
import { ChartSctionProps } from '../Section1';
import styles from './index.less';
import moment from 'moment';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';

const RightContentRender: React.FC<ChartSctionProps> = (props) => {
  const { isModal, full, fullHandle, dateChange, defaultDeteValue } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section2')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <RangePicker defaultValue={defaultDeteValue} format={dateFormat} style={{ marginRight: 10 }} onChange={dateChange} />
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}


const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [avgNum, setAvgNum] = useState(0);
  const { currentDepartmentId } = useModel('organizational')
  const [config, setConfig] = useState<any>()
  const [datePick, setDatePick] = useState([moment(moment().add(-6, 'M'), dateFormat), moment(moment(), dateFormat)])
  const dateChange = (e) => {
    e && setDatePick(e)
  }
  const getData = () => {
    instance('/index/Screen/studyNumber', {
      params: {
        stime: moment(datePick[0]).format('YYYY-MM-DD'),
        etime: moment(datePick[1]).format('YYYY-MM-DD'),
        department_id: currentDepartmentId,
        type: 4
      }
    }).then(data => {
      const num = data.data.reduce((prev, current) => {
        return prev + current.list
      }, 0)
      const day = moment(datePick[1]).diff(moment(datePick[0]), 'day')
      setAvgNum((num / day).toFixed(1))
      const config = {
        data: data.data.map(item => {
          return {
            list: item.list,
            date: moment(item.date).format('MM-DD')
          }
        }),
        padding: 'auto',
        xField: 'date',
        yField: 'list',
        xAxis: {
          tickCount: 5,
          label: {
            style: {
              fill: '#ffffff',
              fontSize: 14
            },
          },
        },
        // color: '#efbd25',
        yAxis: {
          label: {
            style: {
              fill: '#ffffff',
              fontSize: 14
            },
          },
          grid: {
            line: {
              style: {
                stroke: '#8291A9',
                lineWidth: 1,
                lineDash: [4, 5],
                strokeOpacity: 0.7,
              }
            }
          }
        },
      }
      setConfig(config)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      getData()
    }
  }, [currentDepartmentId, datePick]);

  return (
    <div className={styles.section} id="section2">
      <Card TitleRnder="每日学习人数" RightContentRender={<RightContentRender {...props} dateChange={dateChange} defaultDeteValue={datePick} />}>
        <div className={styles.average}>
          <div className={styles.label}>{avgNum}人</div>
          <div className={styles.val}>平均每日参与学习人数</div>
        </div>
        {
          config && <Column height={235} {...config} />
        }
      </Card>
    </div>
  );
});

export default Index;
